/*

how to use:

1) import component
2) set activeSwitch=1 to state
3) use <MySwitchButton  onValueChange={(val) => this.setState({ activeSwitch: val })} /> in your code
4) use { this.state.activeSwitch === 1 ? view1 : view2 }

small example: ...


    constructor () {
        super();

        this.state = {
          activeSwitch: 1
        };
    }


    render () {

        return (

            <View>
                <SwitchButton
                    onValueChange={(val) => this.setState({ activeSwitch: val })}      // this is necessary for this component
                    text1 = 'ON'                        // optional: first text in switch button --- default ON
                    text2 = 'OFF'                       // optional: second text in switch button --- default OFF
                    switchWidth = {100}                 // optional: switch width --- default 44
                    switchHeight = {44}                 // optional: switch height --- default 100
                    switchdirection = 'rtl'             // optional: switch button direction ( ltr and rtl ) --- default ltr
                    switchBorderRadius = {100}          // optional: switch border radius --- default oval
                    switchSpeedChange = {500}           // optional: button change speed --- default 100
                    switchBorderColor = '#d4d4d4'       // optional: switch border color --- default #d4d4d4
                    switchBackgroundColor = '#fff'      // optional: switch background color --- default #fff
                    btnBorderColor = '#00a4b9'          // optional: button border color --- default #00a4b9
                    btnBackgroundColor = '#00bcd4'      // optional: button background color --- default #00bcd4
                    fontColor = '#b1b1b1'               // optional: text font color --- default #b1b1b1
                    activeFontColor = '#fff'            // optional: active font color --- default #fff
                />
            </View>

        );
    }


*/

import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Animated
} from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

class SwitchButton extends Component {
  static propTypes = {
    onValueChange: PropTypes.func
  };

  static defaultProps = {
    onValueChange: () => null
  };

  constructor() {
    super();

    this.state = {
      activeSwitch: 1,
      sbWidth: 180,
      sbHeight: 50,
      direction: 'ltr',
      offsetX: new Animated.Value(0)
    };

    this._switchDirection = this._switchDirection.bind(this);
  }

  _switchDirection(direction) {
    let dir = 'row';

    // if (direction === 'rtl') {
    //   dir = 'row-reverse';
    // } else {
    //   dir = 'row';
    // }
    return dir;
  }

  _switchThump(direction) {
    const { onValueChange, disabled } = this.props;
    let dirsign = 1;
    if (direction === 'rtl') {
      dirsign = -1;
    } else {
      dirsign = 1;
    }

    if (this.state.activeSwitch === 1) {
      this.setState({ activeSwitch: 2 }, () =>
        onValueChange(this.state.activeSwitch)
      );

      Animated.timing(this.state.offsetX, {
        toValue: ((this.props.switchWidth || this.state.sbWidth) / 2) * dirsign,
        duration: this.props.switchSpeedChange || 100
      }).start();
    } else {
      this.setState({ activeSwitch: 1 }, () =>
        onValueChange(this.state.activeSwitch)
      );
      Animated.timing(this.state.offsetX, {
        toValue: 0,
        duration: this.props.switchSpeedChange || 100
      }).start();
    }
  }

  render() {
    return (
      <View style={this.props.style}>
        <TouchableOpacity
          activeOpacity={1}
          onPress={() => {
            this._switchThump(
              this.props.switchdirection || this.state.direction
            );
          }}
        >
          <View
            style={[
              {
                width: this.props.switchWidth || this.state.sbWidth,
                height: this.props.switchHeight || this.state.sbHeight,
                borderRadius:
                  this.props.switchBorderRadius !== undefined
                    ? this.props.switchBorderRadius
                    : this.state.sbHeight / 2,
                backgroundColor: this.props.switchBackgroundColor || '#cac6d1'
              }
            ]}
          >
            <View
              style={[
                {
                  flexDirection: this._switchDirection(
                    this.props.switchdirection || this.state.direction
                  )
                }
              ]}
            >
              <Animated.View
                style={{ transform: [{ translateX: this.state.offsetX }] }}
              >
                <View
                  style={[
                    switchStyles.wayBtnActive,
                    {
                      width:
                        this.props.switchWidth / 2 || this.state.sbWidth / 2,
                      height: this.props.switchHeight || this.state.sbHeight,
                      borderRadius:
                        this.props.switchBorderRadius !== undefined
                          ? this.props.switchBorderRadius
                          : this.state.sbHeight / 2,
                      borderColor: this.props.btnBorderColor || '#000',
                      backgroundColor: this.props.btnBackgroundColor || '#ffff'
                    }
                  ]}
                />
              </Animated.View>

              <View
                style={[
                  switchStyles.textPos,
                  {
                    width: this.props.switchWidth / 2 || this.state.sbWidth / 2,
                    height:
                      this.props.switchHeight - 6 || this.state.sbHeight - 6,
                    left: 0
                  }
                ]}
              >
                <Text
                  style={
                    ([
                      this.state.activeSwitch === 1
                        ? { color: this.props.activeFontColor || '#000' }
                        : { color: this.props.fontColor || '#817d84' }
                    ],
                    {
                      fontFamily: this.props.intro
                        ? this.props.language == 'en'
                          ? 'Quicksand-SemiBold'
                          : 'Tajawal-Medium'
                        : this.props.language == 'en'
                        ? 'Quicksand-SemiBold'
                        : 'Tajawal-Medium'
                    })
                  }
                >
                  {this.props.text1 || 'ON'}
                </Text>
              </View>

              <View
                style={[
                  switchStyles.textPos,
                  {
                    width: this.props.switchWidth / 2 || this.state.sbWidth / 2,
                    height:
                      this.props.switchHeight - 6 || this.state.sbHeight - 6,
                    right: 0
                  }
                ]}
              >
                <Text
                  style={
                    ([
                      this.state.activeSwitch === 2
                        ? { color: this.props.activeFontColor || '#000' }
                        : { color: this.props.fontColor || '#817d84' }
                    ],
                    {
                      fontFamily: this.props.intro
                        ? this.props.language == 'ar'
                          ? 'Quicksand-SemiBold'
                          : 'Tajawal-Medium'
                        : this.props.language == 'en'
                        ? 'Quicksand-SemiBold'
                        : 'Tajawal-Medium'
                    })
                  }
                >
                  {this.props.text2 || 'OFF'}
                </Text>
              </View>
            </View>
          </View>
        </TouchableOpacity>
        {this.props.children}
      </View>
    );
  }
}

const switchStyles = StyleSheet.create({
  textPos: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center'
  },
  rtl: {
    flexDirection: 'row-reverse'
  },
  ltr: {
    flexDirection: 'row'
  },
  wayBtnActive: {
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 5
    },
    shadowOpacity: 0.4,
    shadowRadius: 6,
    elevation: 7
  }
});

const mapStateToProps = state => ({
  language: state.language.lang
});

export default connect(mapStateToProps, null)(SwitchButton);
